<template>
    <div>
      <div @click="divClick" :style="{ width: '100px', height: '65px', backgroundColor: '#ddd' }">
        div
        <!-- .stop - 阻止事件向上冒泡 -->
        <button @click.stop="btnClick">button按钮</button>
      </div>
      <!-- .prevent - 阻止默认事件 -->
      <a href="https://www.baidu.com" @click.prevent="aClick">百度一下</a>
      <!-- .once - 事件只触发一次 -->
      <p><button @click.once="btnClick">button按钮,点击只触发一次</button></p>
      <!-- .capture - 使用事件捕获模式 -->
      <h2>.capture - 使用事件捕获模式</h2>
      <div @click.capture="divClicked">
        点击我2
        <button @click="buttonClicked">使用捕获模式</button>
      </div>
      <hr />
      <!-- .self - 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
      <h2>.self - 只当事件在该元素本身（而不是子元素）触发时触发回调</h2>
      <div @click.self="divClicked">
        点击我3
        <button @click="buttonClicked">点击按钮不会触发父亲元素事件</button>
      </div>
      <!-- 回车键触发事件 -->
      <h2>.enter - 回车键触发事件</h2>
      <input type="text" @keyup.enter="enterKeyup" />
    </div>
  </template>
  
  <!-- <script>
  export default {
    name: 'vonxs',
    methods: {
      divClicked() {
        console.log('divClicked: ')
      },
      buttonClicked() {
        console.log('buttonClicked: ')
      },
      aClick() {
        console.log('aClick')
      },
      divClick() {
        console.log('divClick')
      },
      btnClick() {
        console.log('btnClick')
      },
      enterKeyup(event) {
        console.log('keyup', event.target.value)
      }
    }
  }
  </script> -->
  
  <script setup>
  defineOptions({
    name: 'vonxs'
  })
  const divClicked = () => {
    console.log('divClicked: ')
  }
  const buttonClicked = () => {
    console.log('buttonClicked: ')
  }
  const aClick = () => {
    console.log('aClick')
  }
  const divClick = () => {
    console.log('divClick')
  }
  const btnClick = () => {
    console.log('btnClick')
  }
  const enterKeyup = (event) => {
    console.log('keyup', event.target.value)
  }
  </script>
  
  <style lang="scss" scoped></style>
  